<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黄姗姗</title>
    <style>
        body {
            background-image: url(20.jpg);
            background-size: 50%;
            background-repeat: repeat;
            padding: 10px;
        }
        
        * {
            padding: 0;
            margin: 0;
        }
        
        h1 {
            color: white;
            font-size: 70px;
            position: relative;
            /* right: 100px; */
            left: 100px;
            /* top: 50px; */
        }
        
        h2 {
            text-align: center;
            display: flex;
            flex-direction: row-reverse;
            width: 300px;
            padding-left: 150px;
            color: white;
        }
        
        h3 {
            color: white;
            padding-left: 60px;
            padding-bottom: 10px;
        }
        
        h4 {
            padding-left: 50px;
            color: white;
        }
        
        h2:before,
        h2:after {
            content: "";
            flex: 1 1;
            border-bottom: 1px solid white;
        }
        
        .h {
            position: relative;
        }
        
        .q {
            position: absolute;
            left: 600px;
            top: 480px;
        }
        
        .ui {
            text-align: center;
            padding-left: 600px;
        }
        
        .i {
            position: absolute;
            left: 800px;
            padding: 70px;
            padding-left: 50px;
        }
        
        .z {
            position: relative;
            left: 600px;
            top: 300px
        }
        
        .hh {
            position: relative;
            right: 80px;
        }
        
        .m {
            position: relative;
            left: 600px;
            top: 350px;
        }
        
        .x {
            padding-left: 175px;
            position: absolute;
            top: 50px;
        }
        
        .c {
            padding-left: 345px;
            position: absolute;
            top: 50px;
        }
        
        .v {
            padding-left: 500px;
            position: absolute;
            top: 50px;
        }
        
        .d {
            position: relative;
            left: 400px;
            top: 400px;
        }
        
        .lo {
            padding-left: 200px;
        }
        
        .li {
            padding-left: 200px;
        }
        
        .first {
            padding-left: 150px;
        }
        
        .third {
            padding-left: 250px;
            /* box-shadow: 2px 3px 4px white;/ */
        }
        
        .four {
            padding-left: 150px;
        }
        
        img {
            padding-left: 50px;
            left: 100px;
        }
        
        div img {
            cursor: pointer;
            transition: all 1s;
        }
        
        div img:hover {
            transform: scale(1.5);
        }
        
        .k {
            position: relative;
            left: 600px;
            top: 450px;
            /* border-style: solid;
            border-color: #eae7e3; */
        }
        /* @-wekit-keyframes rotation {
            -webkit-transform: rotate(0deg)
        }
        
        to {
            -webkit-transform: rotate(390deg);
        }
        
        .a {
            -webkit-transform: rotate(360deg);
            animation: rotation 3s linear infinite;
            -moz-animation: rotation 3s linear infinite;
            -webkit-animation: rotation 3s linear infinite;
            -o-animation: rotation 3s linear infinite;
        } */
        /* div:hover a {
            transform: rotate(180deg);
        } */
        
        .big {
            /* text-align: center; */
            padding-left: 100px;
        }
        
        .a {
            position: fixed;
            left: 1370px;
            top: 30px;
            margin: 30px auto;
            animation: move 10s infinite alternate;
        }
        
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(0, 100px);
                rotate: (180deg);
                scale: (1, 5);
            }
        }
        
        .mm {
            padding: 50px;
            padding-left: 150px;
        }
        
        .xi {
            position: relative;
            /* top: 3px;?\ */
            bottom: 750px;
            animation: move 10s infinite;
        }
        
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(0, 100px);
                rotate: (240deg);
                scale: (1, 5);
            }
        }
        
        .ee {
            opacity: 0.6;
            filter: alpha(opacity=50);
            position: relative;
            left: 700px;
            top: 30px;
            z-index: -1;
        }
        
        .hss {
            width: 1200px;
        }
        
        .uu {
            position: relative;
            left: 125px;
            top: 10px;
            opacity: 0.1;
            filter: alpha(opacity=10);
        }
        
        .dd {
            position: relative;
            left: 1600px;
            font-size: 20px;
        }
        
        .kk {
            position: relative;
            left: 1500px;
        }
    </style>

</head>

<body>
    <div class="hss">
        <div class="h">

            <h1>About me</h1>
            <div class="dd">
                <h3>更多</h3>
            </div>


            <br>
            <br>

            <div class="big">
                <h4>个人简介 爱好 软件 作品展示 联系</h4>

            </div>
            <div class="uu"><img src="23.gif" width="200" height="150"></div>
            <br>
            <br>
            <div class="ui">
                <h2>个人简介</h2>
            </div>

            <div class="q"><img src="2.jpg" width="230" height="200"></div>
            <div class="i">
                <h3>姓名：黄姗姗
                    <br>
                    <br>职业：学生
                    <br>
                    <br>专业：艺术与科技
                    <br>
                    <br>学校：成都东软学院

                </h3>
            </div>

        </div>
        <div class="z">
            <h2>爱好</h2>
            <br>
            <br>
            <div class="hh"><img src="17.jpeg" width="200" height="200">
                <img src="18.jpeg" width="200" height="200">
                <img src="19.jpg" width="200" height="200"></div>
            <br>
            <br>
            <div class="li">
                <h4>喜欢看书和古代文化历史</h4>
            </div>


        </div>
        <div class="m">
            <h2>软件</h2>
            <br>
            <div class="n"><img src="3.png" width="100" height="100">
                <h4>wisual studio code<br>掌握：40% </h4>
            </div>
            <div class="x"><img src="6.png" width="100" height="100">
                <h4>ps <br>掌握：60%</h4>
            </div>
            <div class="c"><img src="4.png" width="100" height="100">
                <h4>pr<br>掌握：40%</h4>
            </div>
            <div class="v"><img src="5.png" width="100" height="100">
                <h4>ai<br>掌握：65%</h4>
            </div>

        </div>
        <div class="d">
            <div class="lo">
                <h2>作品展示</h2>
            </div>
            <br>
            <br>
            <div class="first"><img src="7.png" width="300" height="400">
                <img src="8.jpg" width="300" height="400">
            </div>
            <br>
            <br>
            <br>
            <br>
            <div class="second"><img src="9.png" width="500" height="300">
                <img src="10.png" width="500" height="300"></div>

            <br>
            <br>
            <br>
            <br>
            <div class="third"><img src="11.jpg" width="200" height="300">
                <img src="16.jpg" width="200" height="300">
            </div>
            <br>
            <br>
            <br>
            <br>
            <div class="four"><img src="12.jpg" width="200" height="300">
                <img src="13.jpg" width="200" height="300">
                <img src="14.jpg" width="200" height="300">
            </div>
        </div>
        <div class="k">
            <h2>CONTACT</h2>
            <div class="mm">
                <h4>QQ:22356771755</h4>
                <br>
                <h4>PHONE:18064911977</h4>
                <br>
                <h4>EMAIL:22356771755@qq.com</h4>
                <br>
                <h4>WECHAT:18064911977</h4>

            </div>

        </div>

        <div class="a"> <img src="15.png" width="400" height="250"></div>
        <div class="xi"><img src="21.png" width="300" height="200"></div>
        <div class="ee"><img src="22.gif" width="300" height="200"></div>
        <div class="kk"><audio autoplay="autoplay" controls="controls" loop="loop" preload="auto" src="1.mp3"></audio></div>
    </div>
</body>

</html>